<template>
  <div class="information">
    <div class="content">
      <div class="imgBox">
        <img
          :src="userDetails.avatar ? userDetails.avatar : defaultAvatar"
          alt
        >
      </div>

      <div class="firstItem">
        <div class="item">
          <div>
            <h4>姓名</h4>
          </div>
          <div>
            <p v-text="userDetails.info.name ? userDetails.info.name : '用户'+userDetails.id"></p>
          </div>
        </div>
        <div class="item">
          <div>
            <h4>ID</h4>
          </div>
          <div>
            <p>{{userDetails.id}}</p>
          </div>
        </div>
      </div>

      <div class="firstItem">
        <div class="item">
          <div>
            <h4>身份</h4>
          </div>
          <div>
            <p>{{getIdentity()}}</p>
          </div>
        </div>
        <div class="item">
          <div>
            <h4>手机号</h4>
          </div>
          <div>
            <p>{{userDetails.mobile}}</p>
          </div>
        </div>
      </div>

      <div class="firstItem">
        <div class="item">
          <div>
            <h4>是否认证</h4>
          </div>
          <div>
            <span>{{getAuthStatus()}}</span>
          </div>
        </div>
        <div class="item">
          <div>
            <h4>注册时间</h4>
          </div>
          <div>
            <p>{{userDetails.createTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="address">
      <h3>收货地址</h3>
      <el-table :data="tableData" border style="width: 95%">
        <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
        <el-table-column prop="mobile" label="电话" width="180"></el-table-column>
        <el-table-column prop="detail" label="详细地址"></el-table-column>
      </el-table>
    </div>
    <div class="authentication">
      <h3>认证信息</h3>
      <el-table :data="authenticationTableData" border style="width: 95%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号"></el-table-column>
        <el-table-column label="地区">
            <template slot-scope="scope">
                <span>{{getAddressData()}}</span>
            </template>
        </el-table-column>
        <el-table-column label="身份证正面照">
            <template slot-scope="scope">
                <div class='imgBox'>
                    <img preview="1" :src="scope.row.frontOfId" alt="">
                </div>
            </template>
        </el-table-column>
        <el-table-column label="身份证反面照">
            <template slot-scope="scope">
                <div class='imgBox'>
                    <img preview="1" :src="scope.row.backOfId" alt="">
                </div>
            </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="bankCard">
      <h3>银行卡信息</h3>
      <el-table :data="bankCard" border style="width: 95%">
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="bankAddress" label="开户行"></el-table-column>
        <el-table-column prop="number" label="用户卡号"></el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import {ajax} from '@/api';
import Vue from 'vue';
import { parseTime } from '@/utils';
import { getToken } from "@/utils/auth";
import preview from 'vue-photo-preview';
import 'vue-photo-preview/dist/skin.css';
Vue.use(preview)
export default {
  name: "information",
  data() {
    return {
      defaultAvatar:'http://img.zcool.cn/community/01786557e4a6fa0000018c1bf080ca.png',
      tableData: [],
      authenticationTableData:[],
      bankCard:[],
      userDetails:{
        
      },
      params:{
        targetUserId:'',
        token:getToken()
      },
      addressParams:{
        token:''
      },
      userBanksParams:{
        token:''
      },
      userToken:''
    };
  },
  methods:{
    //用户详情（管理员）
    movieDetails(){
        this.authenticationTableData = [];
        this.params.targetUserId = this.$route.params.id;
        ajax('userDetailForManager',this.params).then((res) => {
          if(res.data.status){
              //得到用户详情
              this.userDetails = res.data.data.user;
              res.data.data.user.info.areaId = res.data.data.user.areaId;
              //认证信息
              this.authenticationTableData.push(res.data.data.user.info);
              this.userToken = res.data.data.token;
              if(this.userToken !== ''){
                this.getAddress();
                this.getUserBanks();
              } 
              this.$previewRefresh()
              this.$emit('userToken',res.data.data.token);
          }else{
            this.$message.error(res.data.message);
          }
              
        });
    },
    //用户地址列表
    getAddress(){
      //用户的token
      let params = {
        token:this.userToken
      }
      ajax('userAddresses',params).then((res) => {
          if(res.data.status){
            this.tableData = res.data.data;
          }
      });
    },
    //用户银行列表
    getUserBanks(){
      //用户的token
      let params = {
        token:this.userToken
      }
      ajax('userBanks',params).then((res) => {
          if(res.data.status){
            this.bankCard = res.data.data;
          }
      });
    },

    //得到地区
    getAddressData(){
        if(this.userDetails.areaId === 0){
          return '--';
        }
        for(let i = 0;i < this.tableData.length;i++){
          if(this.userDetails.areaId === this.tableData[i].areaId){
            return this.tableData[i].detail;
          }
        }
    },
    

    getAuthStatus(){
      return this.userDetails.authStatus.text;
    },
    getIdentity(){
      let str = '用户';
      if(this.userDetails.role.admin){
        str = str + '、管理员';
      }

      if(this.userDetails.role.dealer){
        str = str + '、经销商';
      }

      if(this.userDetails.role.issue){
        str = str + '、发行商';
      }

      if(this.userDetails.role.market){
        str = str + '、市场人员';
      }
      return str;
    }
  },
  mounted(){
    this.movieDetails();
    
  }
};
</script>


<style lang="less" scoped>
.information {
  margin-top: 1rem;
  .content {
    display: flex;
    width: 95%;
    border: 1px solid #d8dce5;
    .imgBox {
      width: 13rem;
      img {
        width: 64%;
        height: 8.2rem;
        margin: 1.7rem auto;
        display: inherit;
      }
    }
    .firstItem {
      width: 30%;
      .item {
        display: flex;
        height: 6rem;
        div:first-child {
          width: 33%;
          align-items: center;
          display: flex;
          padding-left: 1rem;
          border-left: 1px solid #d8dce5;
          border-bottom: 1px solid #d8dce5;
          h4 {
            font-size: 17px;
            line-height: 1.5rem;
          }
        }
        div:nth-child(2) {
          width: 67%;
          line-height: 3.8rem;
          padding-left: 1rem;
          align-items: center;
          display: flex;
          border-left: 1px solid #d8dce5;
          border-bottom: 1px solid #d8dce5;
          /* border-right: 1px solid #d8dce5; */
          p {
            margin: 0;
            font-size: 17px;
          }
        }
      }
      .item:last-child {
        div:first-child,
        div:nth-child(2) {
          border-bottom: none;
        }
      }
    }

    .firstItem:last-child {
      .item:first-child {
        div:last-child {
          span {
            color: #f56c6c;
          }
        }
      }
    }
  }
  .address{
      margin: 2rem 0;
      h3{
          font-weight: 400;
          font-size: 18px;
          color: rgba(0, 0, 0, 1);
          margin: 0 0 1rem 0;
      }
  }
  .authentication{
       h3{
          font-weight: 400;
          font-size: 18px;
          color: rgba(0, 0, 0, 1);
          margin: 0 0 1rem 0;
      }
      .imgBox{
          width: 266px;
          height: 171px;
          margin: 4rem auto;
          img{
              width: 100%;
              height: 100%;
          }
      }
  }
  .bankCard{
      margin: 2rem 0;
      h3{
          font-weight: 400;
          font-size: 18px;
          color: rgba(0, 0, 0, 1);
          margin: 0 0 1rem 0;
      }

  }
}
</style>
